<template>
  <div class="lg:flex" style="height: 100px; background-color: #fff; margin-bottom: 10px; padding: 10px; padding-right: 20px">
    <Avatar :src="userinfo.avatar || headerImg" :size="72" class="!mx-auto !block" />
    <div class="md:ml-6 flex flex-col justify-center md:mt-0 mt-2">
      <h1 class="md:text-lg text-md">{{ getGreeting() }}, {{ userinfo.realname }}, {{ workbench('title') }}</h1>
      <!-- <span class="text-secondary"> 今日晴，20℃ - 32℃！ </span> -->
    </div>
    <div class="flex flex-1 justify-end md:mt-0 mt-4">
      <div class="flex flex-col justify-center text-right">
        <span class="text-secondary"> {{ workbench('todos') }} </span>
        <span class="text-2xl">{{ props.totalCount }}</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed } from 'vue';
  import { Avatar } from 'ant-design-vue';
  import { useUserStore } from '/@/store/modules/user';
  import headerImg from '/@/assets/images/logo.png';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t: workbench } = useI18n('dashboard.workbench');
  const props = defineProps({
    totalCount: {
      type: Number as PropType<number>,
      required: true,
    },
  });
  //头部判断时间
  function getGreeting(): string {
    const currentHour = new Date().getHours();
    if (currentHour >= 5 && currentHour < 12) {
      return workbench('morning');
    } else if (currentHour >= 12 && currentHour < 18) {
      return workbench('afternoon');
    } else if (currentHour >= 18 && currentHour < 22) {
      return workbench('night');
    }
    return '';
  }
  const greeting = getGreeting();
  console.log(greeting);
  const userStore = useUserStore();
  const userinfo = computed(() => userStore.getUserInfo);
</script>
<style lang="less" scoped>
  .text-2xl {
    text-align: center;
  }
</style>
